<template>
  <div class="container">
    <div class="login-input">
      <span >用户登录</span>
      <span class="login-input-item">账户：<input type="text" v-model="username"/></span>
      <span class="login-input-item">密码：<input type="password" v-model="password"/></span>
    </div>
    <div class="login-btn">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import storageUtil from "@/utils/storageUtil";
export default {
  name: "Login",
  data(){
    return{
      username:'',
      password:'',
    }
  },
  methods:{
    login(){
      if(this.username && this.password){
          let reqData = qs.stringify({username:this.username,password:this.password});
          this.$axios.post('/api/user/login',reqData)
            .then(data=>{
              if(data.code === 0){
                let uid = data.result.data.id;
                let token = data.result.data.token;
                let username = data.result.data.username;
                //保存token到本地，用于下次请求
                storageUtil.save("uid",uid);
                storageUtil.save("token",token);
                storageUtil.save("username",username);
                //跳转到首页
                // this.$router.push('/?key=value');
                // this.$router.push({path:'/',query:{key:'value'}})
                this.$router.push("/sdfsdfsdfsdf")
              }
            })
      }else{
        alert("请输入账号和密码");
        return;
      }
    }
  }
}
</script>

<style scoped>
.container{
  background-color: #b1afaa;
  width: 400px;
  height: 220px;
  border: gray solid 2px;
  border-radius: 6px;
  margin: 4rem auto 0 auto;
  box-shadow: 2px 2px;
}
.login-input{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.login-input-item{
  margin-top: 0.5rem;
}
.login-btn{
  margin-top: 1.5rem;
}
</style>
